<!--<template>-->
<!--  <div class="community-container">-->
<!--    <div class="header">-->
<!--      <button class="tab">推荐</button>-->
<!--      <button class="tab active">关注</button>-->
<!--    </div>-->
<!--    <div class="post">-->
<!--      <div class="post-header">-->
<!--        <img src="path/to/avatar.jpg" alt="头像" class="avatar" />-->
<!--        <div class="post-info">-->
<!--          <p>阳光男孩在线嗨皮</p>-->
<!--          <p>有什么新鲜事想告诉大家！</p>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="post-content">-->
<!--        <div class="post-item">-->
<!--          <div class="post-user-info">-->
<!--            <img src="path/to/avatar2.jpg" alt="头像" class="avatar" />-->
<!--            <div>-->
<!--              <p>LiNa</p>-->
<!--              <p>3小时前 · 广东</p>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="post-text">-->
<!--            <p>😄😄😄</p>-->
<!--          </div>-->
<!--          <img src="path/to/image.jpg" alt="图片" class="post-image" />-->
<!--          <div class="post-actions">-->
<!--            <span>❤️ 10</span>-->
<!--            <span>💬 2</span>-->
<!--            <span>⭐ 收藏</span>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="post-item">-->
<!--          <div class="post-user-info">-->
<!--            <img src="path/to/avatar3.jpg" alt="头像" class="avatar" />-->
<!--            <div>-->
<!--              <p>TechGeek</p>-->
<!--              <p>15天前</p>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="post-text">-->
<!--            <p>大家好，我是TechGeek！</p>-->
<!--            <p>欢迎找我私信聊天~</p>-->
<!--            <p>#techgeek #TechGeek</p>-->
<!--          </div>-->
<!--          <img src="path/to/image2.jpg" alt="图片" class="post-image" />-->
<!--          <div class="post-actions">-->
<!--            <span>❤️ 20</span>-->
<!--            <span>💬 5</span>-->
<!--            <span>⭐ 收藏</span>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->
<!--  name: 'CommunityCon',-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--.community-container {-->
<!--  font-family: Arial, sans-serif;-->
<!--  padding: 20px;-->
<!--}-->

<!--.header {-->
<!--  display: flex;-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.tab {-->
<!--  padding: 10px 20px;-->
<!--  border: none;-->
<!--  background-color: #f0f0f0;-->
<!--  margin-right: 5px;-->
<!--  cursor: pointer;-->
<!--}-->

<!--.tab.active {-->
<!--  background-color: #fff;-->
<!--  border-bottom: 2px solid #007bff;-->
<!--}-->

<!--.post-header {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.avatar {-->
<!--  width: 40px;-->
<!--  height: 40px;-->
<!--  border-radius: 50%;-->
<!--  margin-right: 10px;-->
<!--}-->

<!--.post-info p {-->
<!--  margin: 0;-->
<!--}-->

<!--.post-content {-->
<!--  border-top: 1px solid #f0f0f0;-->
<!--  padding-top: 10px;-->
<!--}-->

<!--.post-item {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.post-user-info {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.post-text {-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.post-image {-->
<!--  width: 100%;-->
<!--  height: auto;-->
<!--  margin-bottom: 10px;-->
<!--}-->

<!--.post-actions {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  font-size: 14px;-->
<!--  color: #666;-->
<!--}-->
<!--</style>-->
